<!DOCTYPE html>
<html lang="en">

<head>
    <#include "/jh/admin/components/meta.html" />
    <title>用户档案 ${metaTitleSuffix!}</title>
    <#include "/jh/admin/components/stylesheets.html" />
    <style type="text/css">
    .el-select .el-input {
        width: 130px;
    }

    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
    </style>
</head>

<body>
    <div id="app">
        <el-container>
            <#assign menuIndex="2-1" />
            <#include "/jh/admin/components/menu.html" />
            <el-container>
                <#include "/jh/admin/components/header.html" />
                <el-main>
                    <template>
                        <el-row>
                            <el-col :span="12">
                                <div class="title theme-color1">档案</div>
                            </el-col>
                            <#if hasPermission('STU_ADD')>
                                <el-col :span="12">
                                    <div class="operations">
                                        <el-button type="success" size="small" @click="add" ${hasEditPermission('STU_ADD')}><i class="el-icon-plus"></i>录入</el-button>
                                    </div>
                                </el-col>
                            </#if>
                        </el-row>
                        <el-row>
                            <el-col :span='12'>
                                <el-input placeholder="学生姓名/电话/tmk姓名/cc姓名/来源渠道2" v-model="keyword" class="input-with-select" clearable @keyup.native.enter='onSearch'>
                                    <el-select v-model="selectedSchool" slot="prepend" placeholder="校区" clearable>
                                        <el-option :label="item.name" :value="item.id" v-for='item in schools'></el-option>
                                    </el-select>
                                    <el-button slot="append" icon="el-icon-search" @click='onSearch'></el-button>
                                </el-input>
                            </el-col>
                        </el-row>
                        <div class="options">
                            录入时间:
                            <el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" @change="onDateChange" unlink-panels="true" :picker-options="addTimeOptions">
                            </el-date-picker>
                            <el-select v-model="followType" filterable placeholder="跟进类型" ${hasEditPermission('STU_FOLLOW_TYPE')} @change='onFollowTypeChanged' clearable v-if='type == 0'>
                                <el-option v-for="item in followTypes" :value="item">
                                </el-option>
                            </el-select>
                            <el-select v-model="isVisited" placeholder="到访" @change='onIsvisitedChanged' clearable>
                                <el-option label="已到访" :value="1">已到访</el-option>
                                <el-option label="未到访" :value="0">未到访</el-option>
                            </el-select>
                            <el-select v-model="isFollowed" placeholder="跟进" @change='onIsFollowedChanged' clearable>
                                <el-option label="已跟进" :value="1">已跟进</el-option>
                                <el-option label="未跟进" :value="0">未跟进</el-option>
                            </el-select>
                            <el-select v-model="selectedCCId" placeholder="CC" @change='onCCIdChanged' clearable>
                                <el-option v-for="item in ccs" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                            <el-select v-model="selectedTMKId" placeholder="TMK" @change='onTMKIdChanged' clearable>
                                <el-option v-for="item in tmks" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                            <el-select v-model="selectedTuiguangId" placeholder="推广" @change='onTuiguangIdChanged' clearable>
                                <el-option v-for="item in tuiguangs" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                            <el-select v-model="selectedAddStaffId" placeholder="录入人" @change='onAddStaffIdChanged' clearable>
                                <el-option v-for="item in staffs" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                            <el-cascader :options="channel" placeholder="渠道" clearable change-on-select clearable='true' v-model="selectedChannel" @change='onChannelChanged'></el-cascader>
                        </div>
                        <#if hasPermission('STU_FIN_FILTER')>
                            <hr />
                            <el-row>
                                <el-col :span='3'>
                                    <el-select v-model="type" placeholder="类型" @change='onTypeChanged' clearable>
                                        <el-option label="客户" :value="0">客户</el-option>
                                        <el-option label="学员" :value="1">学员</el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span='3'>
                                    <el-select v-model="selectedContractMode" placeholder="性质" @change='onContractModeChanged' clearable>
                                        <el-option v-for="(item, index) in contractMode" :label="item" :value="item">
                                        </el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span='4'>
                                    <el-input placeholder="期限" v-model="term" class="input-with-select" clearable type='number'>
                                        <el-button slot="append" icon="el-icon-search" @click='onSearchFin'></el-button>
                                    </el-input>
                                </el-col>
                                <el-col :span='12'>
                                    开始
                                    <el-date-picker v-model="contractDate" type="datetimerange" range-separator="至" start-placeholder="合同开始日期" end-placeholder="合同结束日期" value-format="yyyy-MM-dd HH:mm:ss" @change="onContractDateChange" unlink-panels="true" :picker-options="addTimeOptions">
                                    </el-date-picker>
                                </el-col>
                                <el-col :span='12'>
                                    结束
                                    <el-date-picker v-model="contractDateEnd" type="datetimerange" range-separator="至" start-placeholder="合同开始日期" end-placeholder="合同结束日期" value-format="yyyy-MM-dd HH:mm:ss" @change="onContractEndDateChange" unlink-panels="true" :picker-options="addTimeOptions">
                                    </el-date-picker>
                                    <el-button type="success" @click="onDownload()"><i class="el-icon-download"></i>下 载</el-button>
                                </el-col>
                            </el-row>
                        </#if>
                        <el-table ref="multipleTable" :data="list" tooltip-effect="dark" :stripe='true' style="width: 100%" v-loading="loadingData" id='dataTable' @selection-change="onSelectStudents">
                            <el-table-column type="selection" width="55">
                            </el-table-column>
                            <el-table-column prop="id" label="编号" sortable show-overflow-tooltip>
                            </el-table-column>
                            <#if type??>
                                <#if type==1>
                                    <el-table-column prop="contract" label="合同编号" sortable>
                                    </el-table-column>
                                </#if>
                            </#if>
                            <el-table-column prop="isVisited" label="到访" sortable show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span v-if='scope.row.isVisited == 1'>已到访</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="isFollow" label="跟进" sortable show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span v-if='scope.row.isFollow == 1'>已跟进</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="isVisited" label="有/无效" sortable show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span v-if='scope.row.isAvailable == 1'>有效</span>
                                </template>
                            </el-table-column>
                            <#if type??>
                                <#if type==0>
                                </#if>
                            </#if>
                            <el-table-column prop="name" label="姓名" sortable>
                                <template slot-scope="scope">
                                    <span>{{scope.row.name}}</span><span v-if='scope.row.isBlackList==1' title="***" style="color: red">[***]</span><span v-if='scope.row.isDemo==1' title="Demo">[Demo]</span><span v-if='scope.row.isVIP==1' title="VIP">[{{scope.row.courseType}}]</span><span v-if='scope.row.isDisable==1' title="已禁用">[未开通]</span><span v-if='scope.row.isLeave==1' title="已离校">[已离校]</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="tag" label="等级" sortable>
                            </el-table-column>
                            <#if hasPermission('STU_MOBILE')>
                                <!-- <el-table-column prop="mobile" label="电话" sortable>
                                </el-table-column> -->
                            </#if>
                            <el-table-column prop="tmkName" label="TMK" sortable>
                            </el-table-column>
                            <el-table-column prop="ccName" label="CC" sortable>
                            </el-table-column>
                            <el-table-column prop="tuiguangName" label="推广" sortable>
                            </el-table-column>
                            <el-table-column prop="taName" label="助教" sortable>
                            </el-table-column>
                            <el-table-column prop="staffName" label="录入人" sortable>
                            </el-table-column>
                            <el-table-column prop="addTime" label="录入时间" sortable>
                            </el-table-column>
                            <el-table-column prop="channelStr" label="渠道" sortable>
                            </el-table-column>
                            <el-table-column prop="schoolName" label="校区" sortable>
                            </el-table-column>
                            <el-table-column prop="contractStartDate" label="合同开始" sortable>
                            </el-table-column>
                            <el-table-column prop="contractEndDate" label="合同结束" sortable>
                            </el-table-column>
                            <#if isReview??>
                                <el-table-column prop="reviewName" label="提交" sortable>
                                </el-table-column>
                            </#if>
                            <#if hasPermission('STU_TRACE')>
                                <el-table-column label="记录" width="300">
                                    <template slot-scope="scope">
                                        <#if hasPermission('STU_VISIT')>
                                            <a :href="['/jh/admin/studentVisit?studentId='+scope.row.id]" ${hasEditPermission('STU_VISIT')}>到访记录</a>
                                        </#if>
                                        <#if hasPermission('STU_FOLLOW')>
                                            <a size="mini" :href="['/jh/admin/studentFollow?studentId='+scope.row.id]" ${hasEditPermission('STU_FOLLOW')}>跟进记录</a>
                                        </#if>
                                        <#if hasPermission('STU_RECORD')>
                                            <a :href="['/jh/admin/studentRecord?studentId='+scope.row.id]" ${hasEditPermission('STU_RECORD')}>学生记录</a>
                                        </#if>
                                        <#if hasPermission('STU_TEACHING_RECORD')>
                                            <a :href="['/jh/admin/teachingRecord/list?studentId='+scope.row.id]" ${hasEditPermission('STU_TEACHING_RECORD')}>教学记录</a>
                                        </#if>
                                    </template>
                                </el-table-column>
                            </#if>
                            <el-table-column :fixed="fixedColumn" label="操作" width="170">
                                <template slot-scope="scope">
                                    <#if hasPermission('STU_HISTORY')>
                                        <el-button @click="history(scope.row)" type="text" size="small" ${hasEditPermission('STU_HISTORY')}>上课历史</el-button>
                                    </#if>
                                    <#if hasPermission('STU_CHECK')>
                                        <!-- <el-button @click="check(scope.row)" type="text" size="small" ${hasEditPermission('STU_CHECK')}>查看</el-button> -->
                                    </#if>
                                    <#if hasPermission('STU_EDIT')>
                                        <el-button @click="edit(scope.row)" type="text" size="small" ${hasEditPermission('STU_EDIT')}>编辑</el-button>
                                    </#if>
                                    <#if hasPermission('STU_DEL')>
                                        <el-button @click="del(scope.row)" type="text" size="small" style="color: red;" ${hasEditPermission('STU_DEL')}>删除</el-button>
                                    </#if>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div style="margin-top: 20px">
                            <#if hasPermission('STU_CHANGE_CC')>
                                <label>CC:</label>
                                <el-select v-model="ccId" placeholder="请选择" ${hasEditPermission('STU_CHANGE_CC')}>
                                    <el-option v-for="item in ccs" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                                <el-button @click="changeCC()" ${hasEditPermission('STU_CHANGE_CC')}>修改cc</el-button>
                            </#if>
                            <#if hasPermission('STU_CHANGE_TMK')>
                                <label> TMK:</label>
                                <el-select v-model="tmkId" placeholder="请选择" ${hasEditPermission('STU_CHANGE_TMK')}>
                                    <el-option v-for="item in tmks" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                                <el-button @click="changeTMK()" ${hasEditPermission('STU_CHANGE_TMK')}>确认</el-button>
                            </#if>
                            <!-- <el-button @click="exportExcel ()">下载</el-button> -->
                        </div>
                        <#include "/jh/admin/components/page.html" />
                    </template>
                </el-main>
            </el-container>
        </el-container>
        <#include "/jh/admin/components/footer.html" />
    </div>
    <#include "/jh/admin/components/scripts.html" />
    <script type="text/javascript" src="/jh/json/studentType.js"></script>
    <script type="text/javascript" src="/jh/json/channel.json"></script>
    <!-- <script src="https://cdn.bootcss.com/xlsx/0.14.0/xlsx.full.min.js"></script> -->
    <!-- <script lang="javascript" src="dist/xlsx.full.min.js"></script> -->
    <!-- <script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script> -->
    <script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                contractDate: [],
                contractDateEnd: [],
                isFollowed: '',
                isVisited: '',
                selectedChannel: [],
                selectedCCId: null,
                selectedTMKId: null,
                selectedTuiguangId: null,
                selectedAddStaffId: null,
                fixedColumn: 'right',
                channel: channel,
                term: '${term!""}',
                contractMode: contractMode,
                selectedContractMode: '${contractMode!""}',
                followTypes: followType,
                followType: "${followType!''}",
                selectedSchool: '',
                keyword: '${keyword!""}',
                loadingData: false,
                schools: [],
                list: [],
                ccs: [],
                tmks: [],
                tuiguangs: [],
                staffs: [],
                type: null,
                ccId: null,
                tmkId: null,
                selectedStudents: [],
                date: [],
                addTimeOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近12个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90 * 4);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                }
            }
        },
        mounted: function() {
            // this.pageTotalRow = 300
            this.pageSize = 2
            var str = '${items!}'
            if (str != '') {
                this.list = JSON.parse(str);
            } else {
                alert('加载失败')
            }
            var schoolId = '${schoolId!}'
            if (schoolId != '') {
                this.selectedSchool = Number(schoolId)
            }
            var type = '${type!}'
            if (type != '') {
                this.type = Number(type)
            }
            var ccs = '${ccs!}'
            if (ccs != '') {
                this.ccs = JSON.parse(ccs);
            }
            var tmks = '${tmks!}'
            if (tmks != '') {
                this.tmks = JSON.parse(tmks);
            }
            var staffs = '${staffs!}'
            if (staffs != '') {
                this.staffs = JSON.parse(staffs);
            }
            var tuiguangs = '${tuiguangs!}'
            if (tuiguangs != '') {
                this.tuiguangs = JSON.parse(tuiguangs);
            }

            var dt1 = '${startDate!""}'
            var dt2 = '${endDate!""}'
            if (dt1 != '' && dt2 != '') {
                this.date = [dt1, dt2]
            }

            var ctStart = '${contractStartDate!""}';
            var ctEnd = '${contractEndDate!""}';
            if (ctStart != '' && ctEnd != '') {
                this.contractDate = [ctStart, ctEnd]
            }
            var cteStart = '${contractEndStartDate!""}';
            var cteEnd = '${contractEndEndDate!""}';
            if (cteStart != '' && cteEnd != '') {
                this.contractDateEnd = [cteStart, cteEnd]
            }
            var tmkIdStr = '${tmkId!""}'
            if (tmkIdStr != '') {
                this.selectedTMKId = Number(tmkIdStr)
            }
            var addStaffStr = '${addStaffId!""}'
            if (addStaffStr != '') {
                this.selectedAddStaffId = Number(addStaffStr)
            }
            var ccIdStr = '${ccId!""}'
            if (ccIdStr != '') {
                this.selectedCCId = Number(ccIdStr)
            }
            var tuiguangIdStr = '${tuiguangId!""}'
            if (tuiguangIdStr != '') {
                this.selectedTuiguangId = Number(tuiguangIdStr)
            }
            var channelStr = '${channel!""}'
            if (channelStr != "") {
                this.selectedChannel = channelStr.split(',')
            }
            var isVisited = '${isVisited!""}'
            if (isVisited != '') {
                this.isVisited = Number(isVisited)
            }
            var isFollowed = '${isFollowed!""}'
            if (isFollowed != '') {
                this.isFollowed = Number(isFollowed)
            }

        },
        methods: {
            onAddStaffIdChanged() {
                var keys = [
                    { "key": 'addStaffId', "value": this.selectedAddStaffId }
                ]
                goPage(1, keys)

            },
            onTuiguangIdChanged() {
                var keys = [
                    { "key": 'tuiguangId', "value": this.selectedTuiguangId }
                ]
                goPage(1, keys)

            },
            onIsFollowedChanged() {
                var keys = [
                    { "key": 'isFollowed', "value": this.isFollowed }
                ]
                goPage(1, keys)
            },
            onIsvisitedChanged() {
                var keys = [
                    { "key": 'isVisited', "value": this.isVisited }
                ]
                goPage(1, keys)
            },
            onChannelChanged() {
                var keys = [
                    { "key": 'channel', "value": this.selectedChannel }
                ]
                goPage(1, keys)
            },
            onTMKIdChanged() {
                var keys = [
                    { "key": 'tmkId', "value": this.selectedTMKId }
                ]
                goPage(1, keys)
            },
            onCCIdChanged() {
                var keys = [
                    { "key": 'ccId', "value": this.selectedCCId }
                ]
                goPage(1, keys)
            },
            exportExcel() {
                var self = this
                self.fixedColumn = 'none'
                setTimeout(function() {
                    /* generate workbook object from table */
                    var elt = document.getElementById('dataTable');
                    var wb = XLSX.utils.table_to_book(elt)

                    // this.fixedColumn = 'right'
                    /* get binary string as output */
                    var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: false, type: 'array' })

                    try {
                        saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')

                        self.fixedColumn = 'right'
                    } catch (e) {
                        if (typeof console !== 'undefined') console.log(e, wbout)
                    }
                }, 1000)
                return

                return wbout
            },
            onDownload() {
                goDownload();
            },
            onContractModeChanged() {
                var keys = [
                    { key: 'contractMode', value: this.selectedContractMode }
                ]
                goPage(1, keys)

            },
            onFollowTypeChanged() {
                var keys = [
                    { key: 'followType', value: this.followType }
                ]
                goPage(1, keys)
            },
            onTypeChanged() {
                var keys = [
                    { key: 'type', value: this.type }
                ]
                goPage(1, keys)

            },
            onContractEndDateChange(val){
                if (val == null) {
                    var keys = [
                        { key: 'contractEndStartDate', value: '' },
                        { key: 'contractEndEndDate', value: '' }
                    ]
                    goPage(1, keys)
                }
                var keys = [
                    { key: 'contractEndStartDate', value: val[0] },
                    { key: 'contractEndEndDate', value: val[1] }
                ]
                goPage(1, keys)
            },
            onContractDateChange(val) {
                if (val == null) {
                    var keys = [
                        { key: 'contractStartDate', value: '' },
                        { key: 'contractEndDate', value: '' }
                    ]
                    goPage(1, keys)
                }
                var keys = [
                    { key: 'contractStartDate', value: val[0] },
                    { key: 'contractEndDate', value: val[1] }
                ]
                goPage(1, keys)
            },
            onDateChange(val) {
                if (val == null) {
                    var keys = [
                        { key: 'startDate', value: '' },
                        { key: 'endDate', value: '' }
                    ]
                    goPage(1, keys)
                }
                var keys = [
                    { key: 'startDate', value: val[0] },
                    { key: 'endDate', value: val[1] }
                ]
                goPage(1, keys)
                // window.location.href = "/jh/admin/arrange/list?startDate=" + val[0] + "&endDate=" + val[1];
            },
            onSelectStudents(val) {
                this.selectedStudents = val
            },
            changeCC() {
                if (this.ccId == null) {
                    return
                }
                var ids = ''
                if (this.selectedStudents.length == 0) {
                    return;
                }
                this.selectedStudents.forEach(row => {
                    ids = ids + row.id + ','
                });
                var url = '/jh/admin/student/changeCC'
                var param = {
                    ids: ids,
                    ccId: this.ccId
                }
                var redirect = ''
                axiosRequest(param, url, '');
            },
            changeTMK() {
                if (this.tmkId == null) {
                    return
                }
                var ids = ''
                if (this.selectedStudents.length == 0) {
                    return;
                }
                this.selectedStudents.forEach(row => {
                    ids = ids + row.id + ','
                });
                var url = '/jh/admin/student/changeTMK'
                var param = {
                    ids: ids,
                    tmkId: this.tmkId
                }
                var redirect = ''
                axiosRequest(param, url, '');
            },
            onSearchFin() {
                var _self = this;
                var keys = [
                    { value: this.term, key: 'term' },
                ]
                goPage(1, keys)
            },
            onSearch() {
                var _self = this;
                // this.loadingData = true;
                var keys = [
                    { value: this.keyword, key: 'keyword' },
                    { value: this.selectedSchool, key: 'schoolId' }
                ]
                goPage(1, keys)
                // setMsg();
                return
                var loading = this.$loading({
                    lock: true,
                    text: '加载中',
                    // spinner: 'el-icon-loading',
                    target: '#dataTable',
                    // background: 'rgba(0, 0, 0, 0.7)'
                });
            },
            add() {
                window.location.href = "/jh/admin/student/info";
            },
            edit(item) {
                window.location.href = "/jh/admin/student/info?studentId=" + item.id;
            },
            check(item) {
                window.location.href = "/jh/admin/student/info?r=1&studentId=" + item.id;
            },
            history(item) {
                window.location.href = "/jh/admin/student/courseHistory?studentId=" + item.id;
            },
            del(item) {
                var self = this;
                confirm("确认删除？请谨慎操作", "确认", function() {
                    var param = Qs.stringify({
                        studentId: item.id
                    });
                    axios({
                            url: '/jh/admin/student/delete',
                            method: 'post',
                            data: param,
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            }
                        })
                        .then(function(response) {
                            if (response.data.status == 200) {
                                endLoading();
                                window.location.href = "/jh/admin/student/list";
                                // msg("登录成功");
                            } else {
                                endLoading();
                                msg(response.data.msg);
                                console.log(response.data);
                            }
                        })
                        .catch(function(error) {
                            endLoading();
                            msg("删除失败");
                            console.log(error);
                        });
                })
            },
            onPageChange(val) {
                // console.log('当前页: {val}' + val);
                goPage(val)
            }
        }
    })
    </script>
    <script type="text/javascript">
    const h = vue.$createElement;

    function setMsg() {

    }
    </script>
    <script>
        vue.schools = JSON.parse('${schools!}')
    </script>
    <style type="text/css">
    .title {
        font-size: 18px;
        font-weight: bold;
    }

    .operations {
        text-align: right;
    }
    </style>
    <#include "/jh/admin/components/msg.html" />
</body>

</html>